<template>
  <div ref="stationrtBar" :style="{ height, width }"></div>
</template>
<script lang="ts">
import { defineComponent, PropType, ref, Ref, reactive, watchEffect, onMounted } from 'vue';
import { useECharts } from '/@/hooks/web/useECharts';
import { cloneDeep } from 'lodash-es';
export default defineComponent({
  name: 'stationrtBar',
  props: {
    chartData: {
      type: Array,
      default: () => [],
    },
    option: {
      type: Object,
      default: () => ({}),
    },
    width: {
      type: String as PropType<string>,
      default: '100%',
    },
    height: {
      type: String as PropType<string>,
      default: '280px',
    },
    titleValue: {
      type: Object,
      default: () => ({}),
    },
  },
  setup(props) {
    const stationrtBar = ref<HTMLDivElement | null>(null);
    const { setOptions, resize } = useECharts(stationrtBar as Ref<HTMLDivElement>);
    // let seriesData = props.chartData;


    let color = ['rgb(125, 133, 144)', '#FF8352', '#E271DE', '#F8456B', '#00FFFF', '#4AEAB0'];
    const option = reactive({
      // backgroundColor: "#344b58",
      legend: {
        right: '5%',
      },
      "tooltip": {
        "trigger": "axis",
        "axisPointer": {
          "type": "shadow",
          textStyle: {
            color: "#fff"
          }

        },
      },
      "grid": {  // 网格
        "borderWidth": 0,
        "top": 40,// 距离上边距
        "bottom": 25,// 距离下边距
        right: 10,// 距离右边距
        textStyle: {
          color: "rgb(125, 133, 144)"
        }
      },
      "calculable": true,
      "xAxis": [{
        "type": "category",
        "axisLine": {
          lineStyle: {
            color: 'rgb(125, 133, 144)'
          }
        },
        "splitLine": {
          "show": false
        },
        "axisTick": {
          "show": false
        },
        "splitArea": {
          "show": false
        },
        "axisLabel": {
          "interval": 0,
          color: 'rgb(125, 133, 144)',
          fontSize: 14
        },
        "data": ['2#桩', '3#桩', '4#桩', '5#桩', '6#桩', '7#桩'],
      }],
      "yAxis": [{
        "type": "value",
        "splitLine": {
          "show": false
        },
        "axisLine": {
          "show": false
        },
        "axisTick": {
          "show": false
        },
        name: '预警次数',
        nameTextStyle: {
          color: 'rgb(125, 133, 144)', //
          fontSize: 16,
          align: 'center', //文字位置

          padding: [0, 0, 0, 0], //表示 [上, 右, 下, 左] 的边距。
        },
        "axisLabel": {
          "interval": 0,
          color: 'rgb(125, 133, 144)',
          fontSize: 14

        },
        "splitArea": {
          "show": false
        },

      }],
      "series": [
        {
          "name": "低风险",
          "type": "bar",
          "stack": "总量",
          "barMaxWidth": 35,
          "barGap": "10%",
          "itemStyle": {
            "normal": {
              "color":
              {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0,
                  color: '#0e76d7' // 0% 处的颜色
                }, {
                  offset: 1,
                  color: 'rgba(35, 157, 250, 0)' // 100% 处的颜色
                }],
                global: false // 缺省为 false
              }
            }
          },
          "data": [
            11,
            22,
            33,
            44,
            55,
            66
          ],
        },
        {
          "name": "中风险",
          "type": "bar",
          "stack": "总量",
          "barMaxWidth": 35,
          "barGap": "10%",
          "itemStyle": {
            "normal": {
              "color":
              {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0,
                  color: '#ff9447' // 0% 处的颜色
                }, {
                  offset: 1,
                  color: '#ffd0af' // 100% 处的颜色
                }],
                global: false // 缺省为 false
              }
            }
          },
          "data": [
            11,
            22,
            33,
            44,
            55,
            66
          ],
        },

        {
          "name": "高风险",
          "type": "bar",
          "stack": "总量",
          "itemStyle": {
            "normal": {
              "color": {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0,
                  color: '#ff3217' // 0% 处的颜色
                }, {
                  offset: 1,
                  color: '#fdc2ba' // 100% 处的颜色
                }],
                global: false // 缺省为 false
              },
              "barBorderRadius": 0
            }
          },
          "data": [
            11,
            22,
            33,
            44,
            55,
            66
          ]
        }, {
          "name": "总数",
          "type": "line",
          symbolSize: 10,
          symbol: 'circle',
          "itemStyle": {
            "normal": {
              "color": 'rgba(255, 196, 53, 1)',
              "barBorderRadius": 0,
            }
          },
          lineStyle: {
            normal: {
              width: 4,
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0,
                  color: 'rgba(255, 67, 2, 1)' // 0% 处的颜色
                }, {
                  offset: 1,
                  color: 'rgba(255, 196, 53, 1)' // 100% 处的颜色
                }],
                global: false // 缺省为 false
              }
            }
          },
          "data": [
            33,
            66,
            99,
            132,
            165,
            198
          ]
        },
      ]
    });

    watchEffect(() => {
      props.chartData && initCharts();
    });

    function initCharts() {
      console.log('stationrtBar watchEffect props.chartData', props.chartData);
      
      if (props.option) {
        Object.assign(option, cloneDeep(props.option));
      }

      // let seriesData = props.chartData.map((item) => {
      //   return item.value;
      // });
      // let xAxisData = props.chartData.map((item) => {
      //   return item.name;
      // });

      option.xAxis[0].data = props.chartData.map((item) => {
        return item.stakeName;
      });
      option.series[0].data = props.chartData.map((item) => {
        return item.lowLevelCount;
      });
      option.series[1].data = props.chartData.map((item) => {
        return item.mediumLevelCount;
      });
      option.series[2].data = props.chartData.map((item) => {
        return item.highLevelCount;
      });
      option.series[3].data = props.chartData.map((item) => {
        return item.highLevelCount+item.highLevelCount+item.lowLevelCount;
      });
      // update-begin--author:liaozhiyang---date:20240407---for：【QQYUN-8762】首页默认及echars颜色调整

      // update-end--author:liaozhiyang---date:20240407---for：【QQYUN-8762】首页默认及echars颜色调整

      setOptions(option);
    }
    onMounted(() => {
      window.addEventListener('resize', function () {
        resize();
      });
    })
    return { stationrtBar };
  },
});
</script>
